<template>
	<view class="pictureWords">
		<view class="header" :style="{ height: globalData.statusBarHeight + globalData.toBar + 10 + 'px' }">
			<view class="title" :style="{ top: globalData.statusBarHeight + 'px', height: globalData.toBar + 'px', lineHeight: globalData.toBar + 'px' }">
				<uni-nav-bar backgroundColor="transparent" title="看图识词" left-icon="left" @clickLeft="goback" />
			</view>
		</view>

		<view class="content">
			<view class="content-title">
				<h3 class="h3title">正在学习</h3>
				<view class="changeBook" @click="changeBook">更换词书</view>
			</view>
			<!-- //词书部分 -->
			<view class="book">
				<view class="book-header">
					<view class="header-left">
						<img src="" alt="" style="width: 136rpx; height: 162rpx" />
						<view class="img-title">四级真题核心词</view>
					</view>

					<view class="header-right">
						<h3 class="header-right-h3" style="font-size: 32rpx">四级真题核心词</h3>
						<progress percent="20" stroke-width="6" border-radius="3" activeColor="rgba(15, 176, 155, 1)" />
						<view class="right-bottom">
							<span>已学习 50</span>
							<span>总词数 2000</span>
						</view>
					</view>
				</view>
				<view class="book-content">
					<wu-cell title="今日计划" value="修改" isLink url="/pages/watchHistory/index"></wu-cell>
					<view class="study">
						<view class="study-item">
							<p class="item-title">已新学</p>
							<p style="margin-top: 16rpx">
								<span class="bigfont">0</span>
								<span class="font">/</span>
								<span class="font">10</span>
							</p>
						</view>

						<view class="study-item" style="margin-left: 34rpx">
							<p class="item-title">已复习</p>
							<p style="margin-top: 16rpx">
								<span class="bigfont">0</span>
								<span class="font">/</span>
								<span class="font">10</span>
							</p>
						</view>
					</view>

					<view class="btns">
						<view class="btn">学习</view>
						<view class="btn" style="margin-left: 34rpx">复习</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer-content">
				<wu-calendar type="week" :fold="false" color="rgba(34, 190, 138, 1)"></wu-calendar>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			globalData: null,
			contentHeight: 0
		};
	},
	created() {
		// 在组件创建时获取 globalData
		try {
			this.globalData = wx.getStorageSync('globalData');
			this.calculateContentHeight();
		} catch (error) {
			// 处理获取存储失败的情况
			console.error('Failed to get globalData from storage:', error);
		}
	},
	onLoad(options) {},

	methods: {
		goback() {
			uni.navigateBack();
		},
		calculateContentHeight() {
			const statusBarHeight = this.globalData.statusBarHeight;
			const toBarHeight = this.globalData.toBar;
			const additionalHeight = 100; // 额外的 60px

			// 计算内容高度
			const contentHeight = `calc(100vh - (${statusBarHeight}px + ${toBarHeight}px + ${additionalHeight}px))`;

			this.contentHeight = contentHeight;
		},
		changeBook() {
			uni.navigateTo({
				url: '/pages/pictureWords/switchPicture'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.pictureWords {
	height: 100vh;
	.header {
		width: 100%;
		// height: 360rpx;
		
		background-color: #fff;
		overflow: hidden;
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			position: absolute;
			width: 100%;
			left: 50%;
			/* top: 20px; */
			transform: translate(-50%, 0);
			color: white;
			font-size: 32rpx;
		}
	}

	.content {
		padding: 24rpx;
		background-color: rgba(255, 255, 255, 1);
		.content-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.h3title {
				font-size: 36rpx;
			}
			.changeBook {
				width: 160rpx;
				height: 60rpx;
				background: #dcf5ed;
				border-radius: 32rpx;
				text-align: center;
				font-size: 28rpx;
				color: #0fb09b;
				line-height: 60rpx;
			}
		}
		.book {
			margin-top: 24rpx;
			// width: 702rpx;
			height: 706rpx;
			background: #fafbfc;
			border-radius: 24rpx;
			border: 2rpx solid #edeff2;
			padding: 0 32rpx;
			.book-header {
				padding: 32rpx 0rpx 40rpx 0rpx;
				display: flex;
				border-bottom: 1px solid rgba(235, 235, 235, 1);
				.header-left {
					position: relative;
					.img-title {
						position: absolute;
						top: 14rpx;
						left: 14rpx;
						font-size: 18rpx;
					}
				}
				.header-right {
					margin-left: 24rpx;
					flex: 1;
					.header-right-h3 {
						margin-bottom: 76rpx;
					}

					.right-bottom {
						font-size: 20rpx;
						color: rgba(153, 153, 153, 1);
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}

			.book-content {
				.study {
					display: flex;
					align-items: center;
					margin-top: 40rpx;
				}
			}
			.study-item {
				width: 302rpx;
			}
			.item-title {
				font-size: 28rpx;
				color: rgba(128, 128, 128, 1);
			}
			.bigfont {
				font-size: 72rpx;
				font-weight: 600;
			}
			.font {
				font-size: 32rpx;
				color: rgba(128, 128, 128, 1);
				margin-left: 10rpx;
			}
			.btns {
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				.btn {
					width: 302rpx;
					height: 98rpx;
					background-color: rgba(34, 190, 138, 1);
					color: #fff;
					border-radius: 16rpx;
					text-align: center;
					line-height: 98rpx;
				}
			}
		}
	}

	.footer {
		padding: 24rpx;
		background-color: rgba(255, 255, 255, 1);
		.footer-content {
			height: 240rpx;
			background: #fafbfc;
			border-radius: 24rpx;
			border: 2rpx solid #edeff2;
		}
	}
	::v-deep {
		.uni-navbar--border {
			border-bottom-color: transparent !important;
		}
		.wu-cell__body {
			padding: 10px 0 !important ;
		}
		.wu-calendar__header {
			display: none !important;
		}

		.wu-calendar-item__weeks-box-item .data-v-162ccb5d {
			height: 48rpx !important;
			border-radius: 50% !important;
		}

		.wu-calendar-item__weeks-lunar-text.data-v-162ccb5d {
			display: none !important;
		}
	}
}
</style>
